﻿let segment: Segment;
window.onload = () => {
    segment = new Segment();
};

function onBuutton2(json: string) {
    segment.data = JSON.parse(json);
    for (let i = 0; i < segment.data.length; i++) {
        segment.data[i] = segment.data[i] * 3;
    }
}

class Segment {
    canvas: HTMLCanvasElement;
    context: CanvasRenderingContext2D;
    data: Array<number>;
    centrePoint: MyCoordinates;
    radius: number;
    theAngle: number;
    biasAngle: number;//旋转偏移值

    init() {
        this.canvas = document.getElementById("canvas1") as HTMLCanvasElement;
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;

        this.context = (document.getElementById("canvas1") as HTMLCanvasElement).getContext("2d");
        this.data = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
        this.centrePoint = new MyCoordinates(this.canvas.width / 2, this.canvas.height / 2);
        this.radius = this.canvas.height * 0.3;
        this.biasAngle = 0;
        this.onSewgment(true);
        this.onSewgment(false);
    }
    constructor() {
        this.init();
        this.onAnimation();
    }

    onAnimation() {
        
        this.theAngle = 360 / this.data.length;
        
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        
        this.context.fillStyle = "#000000";
        this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);

        

        this.context.shadowBlur = 100;
        this.context.shadowColor = "#0000ff";
       // this.biasAngle++;
        this.biasAngle = this.onBiasAngleCount(this.biasAngle);
        this.onSewgment(true);
        this.onSewgment(false);
        this.context.lineWidth = 5;
        for (let i = 0; i < this.data.length; i++) {
            
            this.context.strokeStyle = "#0000ff";
            this.context.beginPath();
            let doc = TriangleLengthXY(this.centrePoint, this.onBiasAngleCount(this.biasAngle + this.theAngle * i), this.radius + this.data[i] / 2);
            this.context.moveTo(doc.x, doc.y);
            doc = TriangleLengthXY(this.centrePoint, this.onBiasAngleCount(this.biasAngle + this.theAngle * i), this.radius + -this.data[i] / 2);
            this.context.lineTo(doc.x, doc.y);
            
            this.context.stroke();
        }

        requestAnimationFrame(() => {
            this.onAnimation();
        });
    }

    onSewgment(is: boolean) {
        this.context.beginPath();
        let doc = TriangleLengthXY(this.centrePoint, this.biasAngle, this.radius + (is ? this.data[0] : -this.data[0])/2);
        this.context.moveTo(doc.x, doc.y);
        for (let i = 1; i < this.data.length; i++) {
            let docs = TriangleLengthXY(this.centrePoint, this.onBiasAngleCount(this.biasAngle + this.theAngle * i), this.radius + (is ? this.data[i] : -this.data[i])/2);
            this.context.lineTo(docs.x, docs.y);
        }
        this.context.lineTo(doc.x, doc.y);
        this.context.stroke();
    }

    //偏移值越界计算
    onBiasAngleCount(angle: number) {
        if (angle >= 360) {
            angle -= 360;
        }
        return angle;
    }

    onDowArc() {
        this.context.strokeStyle = "#a10000";
        this.context.beginPath();
        this.context.arc(this.centrePoint.x, this.centrePoint.y, this.radius, 0, 2 * Math.PI);
        this.context.stroke();
    }
}